<template>
	<view class="station-page">
		<block v-for="(lineItem,lineIndex) in lineList" :key="lineIndex">
			<view class="collection-list" @click="goLineDetail(lineItem)">
				<view class="collection-list-item">
					<view class="line-name">
						<view class="leftnew">
							<wSkeleton  rowWidth="230px" title animate :loading="loading">
								<view class="qs-line-name">
									{{lineItem.lineName}}
								</view>
							</wSkeleton>
							<wSkeleton  rowWidth="200px" title animate :loading="loading">
								<view class="fonthc">
								   <text class="marginright5">候车站</text>
								   <text>{{lineItem.stationName}}</text>
								</view>
							</wSkeleton>
							<wSkeleton  rowWidth="180px" title animate :loading="loading">
								<view class="line-direction">开往{{lineItem.startStopName}}</view>
							</wSkeleton>
							
						</view>
						<view class="rightnew">
							<view v-if="lineItem.status==0" class="display-flex display-flex-column display-flex-align-end">
								<wSkeleton rowWidth="80px" title animate :loading="loading">
								<view v-if="lineItem.oneBus" class="">
									<view v-if="lineItem.oneBus.text!='已到站'" class="display-flex font18 fontw">
										<view  :class="lineItem.oneBus.text=='即将到站'?'txorcolor':'bluecolor'">
											{{lineItem.oneBus.text}}
											<text style="margin: 0 3px;">·</text>
										</view>
										<view :class="lineItem.oneBus.text=='即将到站'?'txorcolor':'bluecolor'" class="display-flex display-flex-align-start">
											<view  class="tx-trave">{{lineItem.oneBus.travelTime.value}}</view>
											<view >{{lineItem.oneBus.travelTime.unit}}</view>
											<image  style="width: 8px;height: 8px;margin-left: 2px;" :src="lineItem.oneBus.text=='即将到站'?'../../static/images/bus/ico-wifi-or.gif':'../../static/images/bus/ico-wifi-blue.gif'"></image>
											
										</view>
									</view>
									<view v-if="lineItem.oneBus.text=='已到站'" class="txorcolor fontw font18">
										已到站
									</view>
						
								</view>
								</wSkeleton>
								<wSkeleton  rowWidth="120px" title animate :loading="loading">
								<view v-if="lineItem.twoBus" class="next-one display-flex display-flex-align-center">
									<view class="marginright5">
										下辆
									</view>
									<view class="marginright5">
										{{lineItem.twoBus.text}}
									</view>
									<view  v-if="parseInt(lineItem.twoBus.travelTime.value)>0" class="">
										{{lineItem.twoBus.travelTime.value}}{{lineItem.twoBus.travelTime.unit}}
									</view>
								</view>
							    </wSkeleton> 
							</view>
							<view v-else class="bluecolor fontw font18">
								<wSkeleton rowWidth="80px" title animate :loading="loading">
								{{lineItem.notice?lineItem.notice:""}}
								</wSkeleton> 
							</view>
						
						</view>
					</view>
					
				</view>
			</view>
			
		</block>
	</view>
</template>

<script>
	import {getLineByStation, getRealBusApi} from "@/api/real_bus.js"
	import Cache from '../../utils/cache';
	import { CITY_INFO} from '../../config/cache.js'
	import b_util from "@/common/js/busutil.js"
	import { wgs84togcj02 } from "@/common/js/mapUtil.js"
	import { wSkeleton} from "@/components/wSkeleton/skeleton.vue"
	
	export default { 
		components: {
			wSkeleton
		},
		data() {
			return {
				loading: true,
				stationData:'',//站点信息
				stationName:'',//站点信息
				cityName:'',
				lineList:[],//线路列表
				stationListSetInterTime:null //定时器
			};
		},
		onLoad(option) {
			// console.log(JSON.stringify(option));
			// var option = {"stationName":"国际会议中心"};
			// console.log(uni.getStorageSync('cityData'));
			// this.stationData = JSON.parse(option.stationData);
			// this.lineList = this.stationData.nearbySegment;
			
			uni.setNavigationBarTitle({
				title:option.stationName
			})
			// 城市名称
			this.stationName = option.stationName;
			this.cityName = uni.getStorageSync('cityData').city;
			this.getStationNameLine(true);
			
		},
		onShow() {
			let that = this;
			clearInterval(this.stationListSetInterTime);
			this.stationListSetInterTime = setInterval(() => {
				that.getLineRealTime(that.lineList)
			}, 15000);
		},
		onPullDownRefresh() {
			this.getStationNameLine(true);
			setTimeout(function(){
				uni.stopPullDownRefresh();
			},1500)
		},
		onUnload() {
			clearInterval(this.stationListSetInterTime);
		},
		onHide() {
			clearInterval(this.stationListSetInterTime);
		},
		filters:{
			formatDisplay(val){
				if(val.isRun==null){
					return '正在查询';
				}
				if(!val.isRun){
					return '不在运营时间';
				}
				if(val.targetStationCount==null){
					return '等待发车';
				}
				if(val.targetStationCount==0){
					return '已到站';
				}
				if(val.targetStationDistance<400 && val.targetStationCount>0){
					return '即将到站';
				}
				
				let time = val.targetStationDistance/val.speed;
				
				return `${(time/60).toFixed(0)}分钟 • ${val.targetStationCount}站`;
			}
		},
		methods: {
			
			// 获取站点下所有公交
			getStationNameLine() { 
				var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
				
				var that = this
				that.loading = true
				getLineByStation({
					stationName:that.stationName,
					cityId: city.id
				}).then(res => {
					that.lineList = res.data;
					// 获取实时数据
					if(that.lineList.length){
						that.getLineRealTime(that.lineList)
					} else{
						that.loading = false
					}
				})
			
			},
	        getLineRealTime(lineList){
				if(!this.lineList.length) return
	        	var that = this
				var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
	        	lineList.forEach((item, index) => {
					
					getRealBusApi({
						lineId: item.lineId,
						targetOrder: item.stationOrder,
						cityId: city.id
					}).then(res => {
						var data = res.data
						var stopOrder =  data.targetOrder;
						var lineData = b_util.parseRealtimeBusLineStation(data,stopOrder)
						that.$set(that.lineList[index],'status',lineData.status)
						that.$set(that.lineList[index],'notice',lineData.notice)
						
						
						if(lineData.buses.length>=0){
							
							var busList = []
							
							lineData.buses.forEach((el, index) => {
								var lag = wgs84togcj02(el.lng, el.lat)
								lineData.buses[index].lng = lag[0]
								lineData.buses[index].lat = lag[1]
								if((stopOrder) - el.order >=0){
									busList.push({
									 	key: (stopOrder) - el.order,
										value: el
									})
								}
						
							})
							
							busList = that.objArraySort(busList, "key")
							
							that.$set(that.lineList[index],'oneBus', '')
							that.$set(that.lineList[index],'twoBus', '')
						
							 
							 if(busList.length >=2){
								 if(busList[0].value.distanceToWaitStn <= busList[1].value.distanceToWaitStn){
									 that.$set(that.lineList[index],'oneBus', busList[0].value)
									 that.$set(that.lineList[index],'twoBus', busList[1].value)
								 } else {
									 that.$set(that.lineList[index],'oneBus', busList[1].value)
									 that.$set(that.lineList[index],'twoBus', busList[0].value)
								 }
								
							 } else if(busList.length == 1)  {
								 that.$set(that.lineList[index],'oneBus', busList[0].value)
							 }
							
							
							// busList.forEach((el, indexb) => {
								
							// 	if(indexb == 0){
							// 		that.$set(that.lineList[index],'oneBus',busList[indexb].value)
							// 	} else if(indexb == 1){
							// 		that.$set(that.lineList[index],'twoBus',busList[indexb].value)
									
							// 	}
							// })
						}
						
						setTimeout(function(){
							that.loading = false
						},500)	
					}).catch(err => {
						setTimeout(function(){
							that.loading = false
						},500)	
					})
	        		// uni.request({
	        		// 	url: "http://open.chelaile.net.cn/bus/line!tpLineDetail.action?s=api&v=0.1&sign=EpDYBeAlUz2hfg5WGx&cityId=989&lineId="+item.lineId+'&targetOrder='+item.stationOrder,
	        		// 	method: 'GET',
	        		// 	timeout: 20000,
	        		// 	success: (res) => {
	        		// 		var data = res.data
	        		// 		data = JSON.parse(data.replace("**YGKJ","").replace("YGKJ##",""))
	        			
	        				
	        		// 		var stopOrder =  data.jsonr.data.targetOrder;
	        		// 		var lineData = b_util.parseRealtimeBusLineStation(data.jsonr.data,stopOrder)
	        		// 		that.$set(that.lineList[index],'status',lineData.status)
	        		// 		that.$set(that.lineList[index],'notice',lineData.notice)
	        				
	        				
	        		// 		if(lineData.buses.length>=0){
	        					
	        		// 			var busList = []
	        					
	        		// 			lineData.buses.forEach((el, index) => {
	        		// 				var lag = wgs84togcj02(el.lng, el.lat)
	        		// 				lineData.buses[index].lng = lag[0]
	        		// 				lineData.buses[index].lat = lag[1]
	        		// 				if((stopOrder) - el.order >=0){
	        		// 					busList.push({
	        		// 					 	key: (stopOrder) - el.order,
	        		// 						value: el
	        		// 					})
	        		// 				}
	        				
	        		// 			})
	        					
	        		// 			busList = that.objArraySort(busList, "key")
	        		// 			busList.forEach((el, indexb) => {
	        						
	        		// 				if(indexb == 0){
	        		// 					that.$set(that.lineList[index],'oneBus',busList[indexb].value)
	        		// 				} else if(indexb == 1){
	        		// 					that.$set(that.lineList[index],'twoBus',busList[indexb].value)
	        							
	        		// 				}
	        		// 			})
	        		// 		}
	        				
	        		// 		setTimeout(function(){
	        		// 			that.loading = false
	        		// 		},500)				
	        		// 	},
	        		// 	fail: (msg) => {
	        		// 		setTimeout(function(){
	        		// 			that.loading = false
	        		// 		},500)	
	        		// 	}
	        		// })
	        						
	        	})
	        },
	        // 排序函数
	         objArraySort(objArr, key) {
	        	let result = objArr.slice(0);
	        	return result.sort((a, b) => a[key] - b[key]);
	        },
			goLineDetail(lineItem){
				
				console.log(333,lineItem)
				clearInterval(this.stationListSetInterTime);
				uni.navigateTo({
					url: `/pages/real_bus/line_detail?stationId=${lineItem.stationId}&lineId=${lineItem.lineId}`,
					complete(res) {
					}
				})
			},
		
		}
	}
</script>

<style lang="scss">
	.station-page{
		min-height: calc(100vh - var(--window-top));
		background-color: #FFFFFF;
		padding: $uni-spacing-col-base 0rpx;
	}
	// 收藏列表
	.collection-list {
		.collection-list-item {
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
			padding: 30rpx 40rpx;
			margin: $uni-spacing-col-base $uni-spacing-row-base;
			
			.line-name {
				display: flex;
				justify-content: space-between;
	
				.left {
					font-weight: bold;
					color: rgba(0, 0, 0, 0.87);
				}
	
				.right {
					font-size: 32rpx;
					color: #26a2ff;
					// color: #8f8f8f; //另一种字体颜色
					font-weight: bold;
	
					image {
						margin-right: 10rpx;
						width: 12rpx;
						height: 24rpx;
					}
				}
			}
	
			.line-direction {
				color: rgba(0, 0, 0, 0.38);
				margin-top: 12rpx;
				font-size: 28rpx;
				text {
					margin-left: 14rpx;
				}
			}
		}
	}
	
	.next-one{
		margin-top: 10px;
		font-size: 13px;
		color: #9da1a9;
	}
	
	.qs-line-name{
		color: #000000;
		font-size: 18px;
		font-weight: 600;
	}
	.marginright5{
		margin-right: 5px;
	}
	
	.txorcolor{
		color: #ff5c32;
	}
	
	.fontw{
		font-weight: 600;
	}
	.font18{
		font-size: 18px;
	}
	.bluecolor{
		color: #007AFF;
	}
	.fonthc{
		font-size: 13px;
		color: #595959;
		margin-top: 3px;
	}
</style>
